<template>
  <div >
    <el-card class="box-card">
<!--      头部-->
      <div slot="header" class="clearfix">
        <span>线上热门搜索</span>
        <el-dropdown class="right">
          <span class="el-dropdown-link" >
            <i class="el-icon-more-outline" ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in data" :key="index">{{item.word}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
<!--      身体-->
      <el-row :gutter="10">
       <el-col :span="12">
         <Echart title="用户搜索总次数" :searchData="searchCount" :echartData="dataCount" flag="1"></Echart>
       </el-col>
       <el-col :span="12">
         <Echart title="人均搜索次数" :searchData="averageSearch" :echartData="dataUser" flag="0"></Echart>
       </el-col>
      </el-row>
<!--      表格-->
      <div>
        <el-table :data="data" style="width: 100%" :default-sort = "{prop: '', order: ''}" >
          <el-table-column type="index" label="序号"  width="150" align="center"> </el-table-column>
          <el-table-column prop="word" label="搜索关键字"  width="width"> </el-table-column>
          <el-table-column prop="user" label="用户数" sortable width="width"> </el-table-column>
          <el-table-column prop="count" label="搜索次数/周" sortable width="width"> </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, total]"
        :recode="tableData"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Echart from './Echart/index'
import {mapState} from "vuex";
export default {
  name: "Search",
  data(){
    return{
      // tableData:[{}],
      //分页器当前页
      currentPage:1,
      size:5,

      //table展示的数据
      data:[{}],
      total:0,
      //传递给第一个echart组件的数据：总搜索次数searchCount、echart绘图数据dataCount
      searchCount:0,
      dataCount:[],
      //传递给第二个echart组件的数据：人均搜索次数averageSearch、echart绘图数据dataUser
      averageSearch:0,
      dataUser:[],
    }
  },
  components:{
    Echart,
  },
  computed:{
    ...mapState({
      echartData:(state)=>{
        return state.home.echartData;
      }
    }),
    tableData(){
      return this.echartData.searchWord;
    },
  },
  watch:{
    //当tableData中有数据时，进行下列操作
    tableData(){
      this.data=this.tableData.slice(0,this.size);
      this.total= this.tableData.length;
      this.searchCount=this.getSearchCount();
      this.dataCount=this.getDataCount();
      this.averageSearch=this.getAverageSearch();
      this.dataUser=this.getDataUser();
    },
  },
  methods:{
    handleSizeChange(size){
      this.size = size;
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange(page){
      this.currentPage=page;
      let {tableData,currentPage,size} =this
      let start=currentPage<2?0:(currentPage-1)*size;
      let end=currentPage*size;
      this.data=tableData.slice(start,end)
    },
    //计算 总搜索次数searchCount、echart绘图数据dataCount
    getSearchCount(){
      let sum=0;
      this.tableData.forEach((item)=>{
        sum+=item.count;
      });
      return sum;
    },
    getDataCount(){
      let data=[];
      this.tableData.forEach((item)=>{
        data.push(item.count);
      })
      return data;
    },
    //计算 人均搜索次数averageSearch、echart绘图数据dataUser
    getAverageSearch(){
      let sum=0;
      let count=0;
      this.tableData.forEach((item)=>{
        sum+=item.count;
        count+=item.user;
      });
      let avg=(sum/count)*10;
      return avg.toFixed(1);
    },
    getDataUser(){
      let data=[];
      this.tableData.forEach((item)=>{
        data.push(item.user);
      })
      return data;
    },
  },
}
</script>

<style scoped>
.box-card{
  margin-top:20px;
}
.clearfix{
  position: relative;
  display: flex;
  justify-content:space-between;
}
.right{
  position: absolute;
  right:20px;
}



</style>
